<template>
  <div class="all" ref="ActiveYear1">
    <div class="bg" v-if="reportFirstJson">
      <LImage class="img-bg" :src="Config.img('2201_bg.png')"></LImage>
      <div class="allab">
        <LImage class="img-stars" :src="Config.img('2201_stars.png')"></LImage>
      </div>
      <LImage class="img-meteor1" :src="Config.img('2201_meteor1.png')"></LImage>
      <LImage class="img-meteor2" :src="Config.img('2201_meteor2.png')"></LImage>
      <LImage class="img-spot-left" :src="Config.img('2201_left_spot.png')"></LImage>
      <LImage class="img-spot-right" :src="Config.img('2201_right_spot.png')"></LImage>
      <LImage class="img-log" :src="Config.img('2201_page1_logo.png')"></LImage>

      <LImage class="img-text" :src="Config.img('2201_page1_text.png')"></LImage>
      <div class="height60"></div>

      <template v-if="reportFirstJson.isOpenStrategy">

        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'这是Vtrading与你相遇的第'}}</span>
          <span class="font52 text-yellow">{{reportFirstJson.dd}}</span>
          <span class="font30 text1">{{'天'}}</span>
        </richtext>  

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}">
          <span class="font30 text1">{{'今年我们相处'}}</span>
          <span class="font52 text-yellow">{{reportFirstJson.hh}}</span>
          <span class="font30 text1">{{'个小时'}}</span>
        </richtext>  

        <div class="height40"></div>
        <text class="font30 text1">{{'感谢一路有你！'}}</text>

        <div class="height40"></div>
        <richtext class="richtext" :style="{'background-color':stylek}"
        v-if="reportFirstJson.vipDay!=undefined && reportFirstJson.vipDay > 0">
          <span class="font30 text1">{{'今年，你共解锁了'}}</span>
          <span class="font52 text-yellow">{{reportFirstJson.vipDay}}</span>
          <span class="font30 text1">{{'天VIP，期待你的VIP风采依旧'}}</span>
        </richtext>  
      </template>
      <template v-else>
        <text class="font30 text1">{{'你还没用过Vtrading~只要你主动'}}</text>

        <div class="height40"></div>
        <text class="font30 text1">{{'我们就会有故事，期待2022与你的开始'}}</text>
      </template>

      <div class="all"></div>
      <div class="but" @stopPropagation="stopPropagation" @click="otClick"></div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
  .richtext {
    background-color:rgba(0, 0, 0, 0)
  }
  .text1 {
    color: #E5F3FF;
  }
  .bg {
    overflow: hidden;
    flex: 1;
    padding-left: 70px;
    padding-right: 70px;
  }
  .allab {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    align-items: center;
  }
  .img-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
  .img-stars {
    width: 719px;
    height: 766px;
  }
  .img-meteor1 {
    position: absolute;
    right: 0;
    top: 0;

    width: 135px;
    height: 270px;
  }
  .img-meteor2 {
    position: absolute;
    left: 0;
    bottom: 500;

    width: 135px;
    height: 270px;
  }
  .img-spot-left {
    position: absolute;
    bottom: 388;
    left: 10;

    width: 88px;
    height: 93px;
  }
  .img-spot-right {
    position: absolute;
    bottom: 288;
    right: 0;
    
    width: 147px;
    height: 155px;
  }
  .img-log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 750px;
    height: 667px;
  }
  .img-text {
    width: 514px;
    height: 118px;
    margin-top: 20px;
  }
  .but {
    height: 160px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .text-yellow {
    color: #F6CF54;
  }
</style>

<script>

//功能
import jconfig from "@/_js/config"; 
import jmath from "@/_js/math"; 
import jtime from "@/_js/time"; 
import jmodal from "@/_js/modal"; 

export default {
  props:{
    data:{
      type:Object,
      default:undefined,
    },
  },

  data() {
    return {
      Config: jconfig,
      data:undefined,
      reportFirstJson:undefined,
      stylek:undefined,
    }
  },

  /* reportFirstJson 1
    *    registerTime   注册时间
    *    isOpenStrategy true使用过实盘
    *    vipDay         VIP使用天数
    **/
  mounted(){
    var reportFirstJson = this.data.reportFirstJson;
    var dd = jtime.getTimeLength(reportFirstJson.registerTime, undefined, 'dd');
    var HH = jtime.getTimeLength(reportFirstJson.registerTime, undefined, 'HH');
    HH = jmath.jia(HH, jmath.cheng(dd, '24'));
    dd = jmath.jia(dd, 1);
    reportFirstJson.dd = dd;
    reportFirstJson.hh = HH;
    this.reportFirstJson = reportFirstJson;
    setTimeout(() => {
      this.stylek = 'rgba(0, 0, 0, 0)';
      this.$forceUpdate();
    }, 1000);
  },

  methods:{
    /******************** 手势*/
    stopPropagation(){
      return true;
    },

    dddClcik() {
    },

    /******************** 按钮*/
    //查看
    otClick() {
      this.$emit("ot", this.$refs.ActiveYear1, 2);
    },
  }
}
</script>
